<template>
	<el-row class="grill-row-home" ref="attendance">
		<el-col :span="6">
			<el-row>
				<el-card class="layout-home grill-col-home grill-col--" ref="scheduleRef">
					<schedule />
				</el-card>
				<el-card class="layout-home grill-col-home grill-height grill-col--" id="personnel">
					<p>我管理的</p>

					<el-table
						v-if="refreshTable"
						:default-expand-all="true"
						:data="dataListLeft.dataList"
						v-loading="dataListLeft.dataListLoading"
						row-key="id"
						class="left-tree"
						:cell-style="{ borderColor: '#00000000' }"
						:header-cell-style="{ borderColor: '#00000000', display: 'none' }"
					>
						<el-table-column type="selection" header-align="left" align="left" width="50"></el-table-column>
						<el-table-column prop="name" label="角色列表" header-align="left" align="left"></el-table-column>
					</el-table>
				</el-card>
			</el-row>
		</el-col>

		<el-col :span="18">
			<el-card class="layout-home grill-col-home">
				<fullcalendar @openAddView="addOrUpdateHandle" :eventsData="eventsData" />
			</el-card>
		</el-col>
	</el-row>

	<add-or-update ref="addOrUpdateRef" @refreshDataList="getScheduleList"></add-or-update>
</template>

<style lang="scss" scoped>
@import '../../../css/home-row-col.css';
</style>

<script setup lang="ts" name="scheduleIndex">
import schedule from '@/views/home/schedule.vue'
import fullcalendar from './line/fullcalendar.vue'

import AddOrUpdate from './plane/add-or-update.vue'
import { onMounted, reactive, ref } from 'vue'
import { createEventId } from '@/api/nb/event-utils'
import service from '@/utils/request'

//左侧 我管理的员工组
// 是否重新渲染表格状态
const refreshTable = ref(true)
const butShow = ref(false)
const roleId = ref()
const dataListLeft = reactive({
	dataList: [],
	dataListLoading: false
})
// 刷新 左侧列表
const findListLeft = () => {
	dataListLeft.dataListLoading = true
	service
		.get('/nb/role/list', {
			params: {}
		})
		.then((res: any) => {
			dataListLeft.dataList = res.data
			if (res.data.length > 0) {
				roleId.value = res.data[0].id
			}
		})
		.finally(() => {
			dataListLeft.dataListLoading = false
		})
}
findListLeft()

//打开新增页面
const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.init(id)
}

//测试数据
const eventsData = reactive({
	dataList: [
		{
			id: createEventId(),
			title: 'sad的事件',
			start: '2023-09-10',
			end: '2023-09-11'
		},
		{
			id: createEventId(),
			title: '定时事件',
			start: '2023-09-10' + 'T08:00:00',
			end: '2023-09-10' + 'T12:00:00'
		}
	]
})

//获取 日程待办列表
const getScheduleList = () => {
	//更新测试数据
	eventsData.dataList.push({
		id: createEventId(),
		title: 'sad的事件',
		start: '2023-09-12',
		end: '2023-09-13'
	})
}

const attendance = ref()
const scheduleRef = ref()
onMounted(() => {
	const pHeight = () => {
		let pi = document.getElementById('personnel')
		let ar = attendance.value.$el.clientHeight
		let sr = scheduleRef.value.$el.clientHeight
		let c = ar - sr
		pi?.setAttribute('style', 'height:' + c + 'px;')
	}
	pHeight()
})
</script>
